/**
 * 动态边框文本DIV点
 * @class
 * @extends graphic.div.BaseDiv
 */
import BaseDiv from "./BaseDiv.js";
    
class DivHtml extends BaseDiv {
    /**
     * 构造函数
     * @param {Object} options 配置参数
     * @param {Array.<Number>} [options.position=[111, 28, 0]] 可选 经纬度[x,y,z]
     * @param {Object} [options.style={}] 样式信息
     * @param {String} [options.style.html=''] HTML内容
     * @param {Cesium.HorizontalOrigin} [options.style.horizontalOrigin=Cesium.HorizontalOrigin.CENTER] 可选 水平对齐方式
     * @param {Cesium.VerticalOrigin} [options.style.verticalOrigin=Cesium.VerticalOrigin.CENTER] 可选 垂直对齐方式
     * @param {String|Number} [options.style.offsetX=0] 可选 用于非规则div时，横向偏移的px像素值
     * @param {String|Number} [options.style.offsetY=0] 可选 用于非规则div时，纵向偏移的px像素值
     * @param {Cesium.DistanceDisplayCondition|Object} [options.style.distanceDisplayCondition={ near: 0.1, far: 1000000}] 可选 可视范围
     * @param {Boolean} [options.style.pointerEvents=true] 可选 DIV是否可以鼠标交互,为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件
     * @param {Boolean} [options.style.userSelect=false] 可选 是否可以选中文本
     */
    constructor(options) {
        super(options);
        
        // 初始化样式
        this._style = { 
            html: '',
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            offsetX: 0,
            offsetY: 0,
            distanceDisplayCondition: { near: 0.1, far: 1000000 },
            pointerEvents: true,
            userSelect: false,
            ...(options.style || {})
        };
        
        // 设置对齐方式
        this._horizontalOrigin = this._style.horizontalOrigin;
        this._verticalOrigin = this._style.verticalOrigin;
        
        // 创建DOM元素
        this._createDomElement();
    }
    
    /**
     * 获取图元类型
     * @readonly
     * @returns {String} 图元类型
     */
    get typeName() {
        return 'DivHtml';
    }
    
    /**
     * 创建DOM元素
     * @private
     */
    _createDomElement() {
        // 创建主容器
        const div = document.createElement('div');
        div.className = 'cesium-extensions-div-base';
        div.style.position = 'absolute';
        div.style.pointerEvents = this._style.pointerEvents ? 'auto' : 'none';
        div.style.userSelect = this._style.userSelect ? 'auto' : 'none';
        div.style.overflow = 'visible';
        div.style.whiteSpace = 'nowrap';
        div.style.zIndex = '10';
        
        // 设置HTML内容
        if (this._style.html) {
            div.innerHTML = this._style.html;
        }
        
        // 设置DOM元素
        this._domEle = div;
        
        // 更新DOM样式
        this._updateDomStyle();
    }
    
    /**
     * 更新DOM样式
     * @private
     * @param {HTMLElement} element DOM元素
     */
    _updateDomStyle(element = this._domEle) {
        if (!element) return;
        
        // 应用基础样式
        super._updateDomStyle(element);
        
        // 设置HTML内容
        if (this._style.html) {
            element.innerHTML = this._style.html;
        }
        
        // 设置鼠标交互和文本选择
        element.style.pointerEvents = this._style.pointerEvents ? 'auto' : 'none';
        element.style.userSelect = this._style.userSelect ? 'auto' : 'none';
        
        // 应用额外的样式设置
        if (this._style.offsetX) {
            element.style.transform = `translateX(${Number(this._style.offsetX)}px)`;
        }
        
        if (this._style.offsetY) {
            const currentTransform = element.style.transform || '';
            element.style.transform = `${currentTransform} translateY(${Number(this._style.offsetY)}px)`;
        }
    }
    
    /**
     * 设置样式
     * @param {Object} style 样式对象
     */
    set style(style) {
        this._style = { ...this._style, ...style };
        
        // 更新对齐方式
        if (style.horizontalOrigin !== undefined) {
            this._horizontalOrigin = style.horizontalOrigin;
        }
        
        if (style.verticalOrigin !== undefined) {
            this._verticalOrigin = style.verticalOrigin;
        }
        
        // 更新DOM样式
        this._updateDomStyle();
        
        // 如果是可见状态，触发位置更新
        if (this._show && this._graphicLayer && this._graphicLayer._map) {
            this.updatePosition(this._graphicLayer._map.scene);
        }
    }
    
    /**
     * 获取样式
     * @returns {Object} 样式对象
     */
    get style() {
        return { ...this._style };
    }
    
    /**
     * 销毁对象
     */
    destroy() {
        if (this._domEle && this._domEle.parentNode) {
            this._domEle.parentNode.removeChild(this._domEle);
        }
        this._domEle = null;
        this._style = null;
        super.destroy();
    }
}
export default DivHtml;
